<template>
  <div class="ruleChain-node" :class="nodeClass">
    <div class="node-main">
      <div class="left-area">
        <div class="title">{{ name }}</div>
        <div v-if="description" class="sub-title">{{ description }}</div>
      </div>
      <div class="node-icon">
        <svg-icon v-if="type" :icon-class="icon" :className='`icon ${type}`'/>
        <svg-icon v-if="loopJudgment" icon-class="loopJudgment" className='loop-judgment'/>
      </div>
    </div>
    <div class="nodebtn-main">
      <div v-if="removeEnabled" class="node-btn btn-remove el-icon-close" @click="deleteHandler"></div>
      <div v-if="editEnabled" class="node-btn btn-edit el-icon-edit" :style="{right: removeEnabled ? '28px' : '0'}" @click="editHandler"></div>
    </div>
  </div>
</template>

<script>
import { NodeConfig } from '@/model/node.model'
import { clearNodeClashValidate } from '@/utils/validate'
import store from '@/store'

export default {
  name: 'RuleNode',
  inject: ['getGraph', 'getNode'],
  data() {
    return {
      NodeConfig,
      nodeClass: {},
      name: '',
      type: '',
      description: '',
      icon: '',
      removeEnabled: true,
      editEnabled: true,
      loopJudgment: false
    }
  },
  props: {
    noPorts: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    // 获取画布中传递的节点参数
    // 节点参数在node.data中
    const node = this.getNode()
    const nodeData = node.getData()
    const _self = this

    if (nodeData.nodeClass) {
      this.nodeClass[nodeData.nodeClass] = true
    }

    if (this.noPorts) {
      this.nodeClass['no-ports'] = true
    }

    if (['SceneLibAutoTouchNode', 'SceneLibAutoExitNode', 'SceneLibManualTouchNode', 'SceneLibManualExitNode', 'SceneLibFrontConditionNode'].includes(nodeData.additionalInfo.component)) { // 前置条件节点样式不同
      this.nodeClass['black-node'] = true
    }

    this.name = nodeData.name || ''
    this.type = nodeData.type || ''
    this.description = nodeData.description || ''
    this.icon = nodeData.additionalInfo.icon || ''
    this.removeEnabled = nodeData.additionalInfo.removeEnabled
    this.editEnabled = nodeData.additionalInfo.editEnabled
    this.loopJudgment = nodeData.additionalInfo.component === 'SceneLibSceneNode' && nodeData.configuration?.continuousJudgment?.loopJudgment

    node.on('change:data', ({ current }) => {
      _self.name = current.name || ''
      this.description = current.description || ''
      this.editEnabled = current.additionalInfo.editEnabled
      this.removeEnabled = current.additionalInfo.removeEnabled
      this.loopJudgment = current.additionalInfo.component === 'SceneLibSceneNode' && current.configuration?.continuousJudgment?.loopJudgment
    })
  },
  methods: {
    deleteHandler() {
      const graph = this.getGraph()
      const node = this.getNode()
      clearNodeClashValidate(node)
      graph.removeConnectedEdges(node)
      graph.removeNode(node)
    },
    editHandler() {
      const node = this.getNode()
      store.commit('graph/selectedItem', {
        type: 'node',
        data: node
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.ruleChain-node{
  .loop-judgment{
    position: absolute;
    top: 32px;
    left: 176px;
  }
}
</style>
